<template>
	<view>
		<view><u-tabs :list="list" :is-scroll="false" :current="current" bar-width="200" @change="tabsChange"></u-tabs></view>
		<view class="swipeCon" v-show="current == 0">
			<u-swiper v-if="uList.length > 0" :list="uList" :title="true" @click="uListClick"></u-swiper>
			<view class="text-center padding-xs" v-else>暂无U型数据</view>
			<view class="planCon">
				<image class="plan" mode="widthFix" :src="uPlanUrl" @click="uPlanClick"></image>
				<view class="planTitle">{{ uPlanTitle }}</view>
			</view>
		</view>
		<view class="swipeCon" v-show="current == 1">
			<u-swiper v-if="lList.length > 0" :list="lList" :title="true" @click="lListClick"></u-swiper>
			<view class="text-center padding-xs" v-else>暂无L型数据</view>
			<view class="planCon">
				<image class="plan" mode="widthFix" :src="lPlanUrl" @click="lPlanClick"></image>
				<view class="planTitle">{{ lPlanTitle }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	data() {
		return {
			list: [
				{
					name: 'U型'
				},
				{
					name: 'L型'
				}
			],
			current: 0,
			uList: [], //u型轮播图
			uUrlList: [], //u型轮播图url
			lList: [], //l型轮播图
			lUrlList: [], //l型轮播图url
			shopsType: 'A', //店类型
			uPlanUrl: '', //u俯视图
			uPlanTitle: '', //u俯视图标题
			lPlanUrl: '', //l俯视图
			lPlanTitle: '' //l俯视图标题
		};
	},
	onLoad(obj) {
		if (obj && obj.type) {
			this.shopsType = obj.type;
			this.initData();
			uni.setNavigationBarTitle({
				title:`${obj.type}级店面展示`
			})
		}
	},
	methods: {
		...mapActions({
			getShopsShowPic: 'agent/getShopsShowPic'
		}),
		tabsChange(index) {
			this.current = index;
		},
		initData() {
			this.getShopsShowPic()
				.then(res => {
					console.log(res);
					if (res && res.code == 0) {
						let uList = [];
						let lList = [];
						let listL = res.data[`${this.shopsType}L`];
						let listU = res.data[`${this.shopsType}U`];
						if (listL) {
							listL.forEach(e => {
								let { title, image } = this.dealImageData(e);
								lList.push({
									title,
									image
								});
								this.lUrlList.push(image);
							});
							this.lList = lList;
						}

						if (listU) {
							listU.forEach(e => {
								let { title, image } = this.dealImageData(e);
								uList.push({
									title,
									image
								});
								this.uUrlList.push(image);
							});
							this.uList = uList;
						}

						if (res.data[`${this.shopsType}PU`]) {
							let e = res.data[`${this.shopsType}PU`][0];
							let { title, image } = this.dealImageData(e);
							this.uPlanUrl = image;
							this.uPlanTitle = title;
						}
						if (res.data[`${this.shopsType}PL`]) {
							let e = res.data[`${this.shopsType}PL`][0];
							let { title, image } = this.dealImageData(e);
							this.lPlanUrl = image;
							this.lPlanTitle = title;
						}
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		dealImageData(e) {
			let splitIndex = e.indexOf('-');
			let title = e.slice(0, splitIndex);
			let image = e.slice(splitIndex + 1);
			// image = image.replace('http', 'https');
			return {
				title,
				image
			};
		},
		uListClick(index) {
			uni.previewImage({
				current: index,
				urls: this.uUrlList
			});
		},
		lListClick(index) {
			uni.previewImage({
				current: index,
				urls: this.lUrlList
			});
		},
		uPlanClick() {
			uni.previewImage({
				urls: [this.uPlanUrl]
			});
		},
		lPlanClick() {
			uni.previewImage({
				urls: [this.lPlanUrl]
			});
		}
	}
};
</script>

<style lang="less">
.swipeCon {
	padding: 44rpx 12rpx 0 12rpx;
}
.planCon {
	padding: 115rpx 24rpx 0 24rpx;
	position: relative;
	.plan {
		width: 100%;
		// height: 500rpx;
	}
	.planTitle {
		text-align: center;
		// position: absolute;
		// width: 100%;
		// bottom: 0;
		// left: 0;
		// background-color: rgba(0, 0, 0, 0.3);
		// color: rgba(255, 255, 255, 0.9);
	}
}
</style>
